<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teachable Machine V1 - 本地复刻版</title>
    
    <!-- 国内CDN资源 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav class="navbar navbar-dark bg-primary">
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">
                <i class="fas fa-brain"></i> Teachable Machine V1
            </span>
            <div class="d-flex">
                <button class="btn btn-outline-light me-2" onclick="showTab('home')">
                    <i class="fas fa-home"></i> 首页
                </button>
                <button class="btn btn-outline-light me-2" onclick="showTab('train')">
                    <i class="fas fa-cog"></i> 训练
                </button>
                <button class="btn btn-outline-light" onclick="showTab('predict')">
                    <i class="fas fa-magic"></i> 预测
                </button>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-3">
        <!-- 首页 -->
        <div id="home-tab" class="tab-content">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-info-circle"></i> 使用说明</h5>
                        </div>
                        <div class="card-body">
                            <ol>
                                <li>点击"训练"标签页开始收集数据</li>
                                <li>为每个类别拍摄或上传至少20张图片</li>
                                <li>点击"开始训练"按钮训练模型</li>
                                <li>训练完成后切换到"预测"标签页进行实时分类</li>
                            </ol>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-camera"></i> 摄像头预览</h5>
                        </div>
                        <div class="card-body text-center">
                            <video id="preview-video" autoplay muted class="img-fluid rounded"></video>
                            <br>
                            <button class="btn btn-primary mt-2" onclick="startCamera()">
                                <i class="fas fa-play"></i> 启动摄像头
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 训练页面 -->
        <div id="train-tab" class="tab-content" style="display: none;">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5>类别 1</h5>
                        </div>
                        <div class="card-body">
                            <input type="text" class="form-control mb-2" id="class1-name" placeholder="输入类别名称" value="类别A">
                            <div class="mb-2">
                                <video id="class1-video" autoplay muted class="img-fluid rounded mb-2"></video>
                                <button class="btn btn-success btn-sm me-1" onclick="captureImage(1)">
                                    <i class="fas fa-camera"></i> 拍照
                                </button>
                                <input type="file" id="class1-upload" multiple accept="image/*" 
                                       onchange="uploadImages(event, 1)" style="display: none;">
                                <button class="btn btn-info btn-sm" onclick="document.getElementById('class1-upload').click()">
                                    <i class="fas fa-upload"></i> 上传
                                </button>
                            </div>
                            <div id="class1-images" class="image-grid"></div>
                            <small class="text-muted">已收集: <span id="class1-count">0</span> 张</small>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5>类别 2</h5>
                        </div>
                        <div class="card-body">
                            <input type="text" class="form-control mb-2" id="class2-name" placeholder="输入类别名称" value="类别B">
                            <div class="mb-2">
                                <video id="class2-video" autoplay muted class="img-fluid rounded mb-2"></video>
                                <button class="btn btn-success btn-sm me-1" onclick="captureImage(2)">
                                    <i class="fas fa-camera"></i> 拍照
                                </button>
                                <input type="file" id="class2-upload" multiple accept="image/*" 
                                       onchange="uploadImages(event, 2)" style="display: none;">
                                <button class="btn btn-info btn-sm" onclick="document.getElementById('class2-upload').click()">
                                    <i class="fas fa-upload"></i> 上传
                                </button>
                            </div>
                            <div id="class2-images" class="image-grid"></div>
                            <small class="text-muted">已收集: <span id="class2-count">0</span> 张</small>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5>类别 3</h5>
                        </div>
                        <div class="card-body">
                            <input type="text" class="form-control mb-2" id="class3-name" placeholder="输入类别名称" value="类别C">
                            <div class="mb-2">
                                <video id="class3-video" autoplay muted class="img-fluid rounded mb-2"></video>
                                <button class="btn btn-success btn-sm me-1" onclick="captureImage(3)">
                                    <i class="fas fa-camera"></i> 拍照
                                </button>
                                <input type="file" id="class3-upload" multiple accept="image/*" 
                                       onchange="uploadImages(event, 3)" style="display: none;">
                                <button class="btn btn-info btn-sm" onclick="document.getElementById('class3-upload').click()">
                                    <i class="fas fa-upload"></i> 上传
                                </button>
                            </div>
                            <div id="class3-images" class="image-grid"></div>
                            <small class="text-muted">已收集: <span id="class3-count">0</span> 张</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-cogs"></i> 训练控制</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>训练轮数 (Epochs):</label>
                                    <input type="range" class="form-range" id="epochs" min="5" max="50" value="10" 
                                           oninput="document.getElementById('epochs-value').textContent = this.value">
                                    <span id="epochs-value">10</span>
                                </div>
                                <div class="col-md-6">
                                    <label>学习率:</label>
                                    <input type="range" class="form-range" id="learning-rate" min="0.0001" max="0.01" 
                                           step="0.0001" value="0.0001" 
                                           oninput="document.getElementById('lr-value').textContent = this.value">
                                    <span id="lr-value">0.0001</span>
                                </div>
                            </div>
                            
                            <div class="mt-3">
                                <button class="btn btn-primary me-2" onclick="startTraining()">
                                    <i class="fas fa-play"></i> 开始训练
                                </button>
                                <button class="btn btn-secondary me-2" onclick="clearAllData()">
                                    <i class="fas fa-trash"></i> 清除数据
                                </button>
                                <button class="btn btn-success" onclick="exportModel()">
                                    <i class="fas fa-download"></i> 导出模型
                                </button>
                                <input type="file" id="import-model" accept=".json" style="display: none;" 
                                       onchange="importModel(event)">
                                <button class="btn btn-info" onclick="document.getElementById('import-model').click()">
                                    <i class="fas fa-upload"></i> 导入模型
                                </button>
                            </div>

                            <div class="mt-3">
                                <div class="progress" style="height: 25px;">
                                    <div class="progress-bar" id="training-progress" style="width: 0%">
                                        准备就绪
                                    </div>
                                </div>
                                <canvas id="training-chart" width="400" height="200"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 预测页面 -->
        <div id="predict-tab" class="tab-content" style="display: none;">
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-video"></i> 实时预测</h5>
                        </div>
                        <div class="card-body">
                            <video id="predict-video" autoplay muted class="img-fluid rounded"></video>
                            <br>
                            <button class="btn btn-primary mt-2" onclick="startPrediction()">
                                <i class="fas fa-play"></i> 开始预测
                            </button>
                            <button class="btn btn-secondary mt-2" onclick="stopPrediction()">
                                <i class="fas fa-stop"></i> 停止预测
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-chart-bar"></i> 预测结果</h5>
                        </div>
                        <div class="card-body">
                            <div id="prediction-results">
                                <div class="prediction-item">
                                    <div class="prediction-label">准备就绪</div>
                                    <div class="progress">
                                        <div class="progress-bar bg-primary" style="width: 0%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/tensorflow/4.10.0/tf.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
